<template>
    <div class="imgDetail">
        <div class="imgDetailHead">
            <a-button icon="arrow-left" @click="backToList" title=""></a-button>
            <div style="float:right;">
                <a-button icon="left" @click="handleReverseChange(detailIndex-2)"></a-button>
                <a-button icon="right" @click="handleReverseChange(detailIndex+1)"></a-button>
                <a-button icon="rollback" title="撤销"></a-button>
            </div>
        </div>
        <a-row class="imgDetailCon">
            <a-col :span="16" style="border-right:1px solid #e9e9e9;height:100%;">
                <div class="pageImg">
                    <img :src="datailData.imgSrc" style="width:100%" alt="">
                </div>
                <div class="turnPage">
                    <div class="leftSlide">
                        <a-slider id="test" :default-value="0" :value="detailIndex" :min="1" :max="listData.length" @change="handleReverseChange" />
                    </div>
                    <div class="pageNum">
                        {{detailIndex}}/{{listData.length}}
                    </div>
                    <div class="pageIcon">
                        <a-icon type="eye"></a-icon>
                        <a-icon type="message"></a-icon>
                    </div>
                </div>
            </a-col>
            <a-col :span="8" style="padding:16px;">
                <span class="imgAttribute">属性</span>
                <a-textarea
                v-model="datailData.title"
                placeholder=""
                :auto-size="{ minRows: 3, maxRows: 5 }"
                />
                <div class="dataClassification">
                    <span class="title">资料分类</span>
                    <span @click="showList"><a-icon type="plus-square" theme="filled"/>认领</span>
                </div>
                <div class="basicInfo">
                    <span>基本信息</span>
                    <p>
                        <span class="title">文件大小</span>
                        <span>114kB</span>
                    </p>
                    <p>
                        <span class="title">文件尺寸</span>
                        <span>200*200</span>
                    </p>
                    <p>
                        <span class="title">文件类型</span>
                        <span></span>
                    </p>
                    <p>
                        <span class="title">添加时间</span>
                        <span></span>
                    </p>
                    <p>
                        <span class="title">操作员</span>
                        <span></span>
                    </p>
                </div>
            </a-col>
        </a-row>
        <claim-model ref="claimModel"></claim-model>
    </div>
</template>
<script>
import claimModel from "@/views/component/claimModel"
export default {
    name:"imgDetail",
    components:{claimModel},
    data(){
        return{
            listData:[],
            detailIndex:0,
            datailData:{
                imgSrc:"https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original",
                title:"20200908-IMG-111",

            },
            isShowList:false,
            prevIndex:0,
            nextIndex:0,
        }
    },
    methods:{
        getDetailData(data,index){
            this.listData = data;
            this.detailIndex = index + 1;
            this.datailData = data[index];
            console.log(data,index);
        },
        showList(){
            this.$refs.claimModel.showModal();
        },
        backToList(){
            this.$emit('func')
        },
        handleReverseChange(value){
            this.detailIndex = value;
            console.log(this.detailIndex);
            this.datailData = this.listData[this.detailIndex-1];
        }
    }
}
</script>
<style lang="less">
.imgDetail{
    padding:0 16px;
    height: calc(100% - 100px);
}
.imgDetailHead{
    padding:16px 0;
}
.imgDetailCon{
    background:#fff;
    height: 100%

}
.imgAttribute{
    display: block;
    font-size: 18px;
    margin-bottom: 20px;
    color: #000;
}
.basicInfo p{
    margin-bottom: 0;
    line-height: 30px;
}
.basicInfo .title{
    display: inline-block;
    width:80px;
}
.basicInfo>span{
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 8px;
    color: #000;
}
.dataClassification{
    margin:30px 0 20px;
    color:@primary-color;
    font-size: 16px;
}
.dataClassification .title{
    display: inline-block;
    width:80px;
    font-size: 16px;
    font-weight: 500;
    color:#000;
}
.dataClassification i{
    margin-right: 9px;
}
.pageImg{
    height:calc(100% - 65px);
    border-bottom:1px solid #e9e9e9;
}
.turnPage{
    height:65px;
}
.leftSlide{
    float:left;
    width:120px;
}
.leftSlide .ant-slider{
    margin: 26.5px 20px;
}
.pageNum{
    float:right;
    color:#000;
    line-height: 65px;
    font-size: 16px;
    padding:0 20px;
}
.pageIcon{
    text-align: center;
    line-height: 65px;
}
.pageIcon i{
    margin:0 5px;
    color:rgba(@primary-color,1);
}
</style>